<template>
  <router-layout>
    <div class="idex">
      <!-- <TitleItem v-if="this.wx==true"></TitleItem> -->
      <div class="banner">
        <img src="https://gw.alicdn.com/tfs/TB1pW8mOirpK1RjSZFhXXXSdXXa-750-292.png" alt srcset>
      </div>
      <div class="body">
        <div class="list">
          <div class="listBac" @click="openLink(1)">
            <div class="title">
              <i class="yuan"></i>
              <p class="title_text">勋章排行榜</p>
            </div>
            <p class="transcript">点击查看</p>
            <img
              class="imgage"
              src="https://gw.alicdn.com/tfs/TB1WL0pOmzqK1RjSZFpXXakSXXa-96-96.png"
              alt
              srcset
            >
          </div>
          <div class="listBac" @click="openLink(2)">
            <div class="title">
              <i class="yuan1"></i>
              <p class="title_text">积分排行榜</p>
            </div>
            <p class="transcript">点击查看</p>
            <img
              class="imgage"
              src="https://gw.alicdn.com/tfs/TB1ljNnOkvoK1RjSZFDXXXY3pXa-116-116.png"
              alt
              srcset
            >
          </div>
        </div>
        <div class="list">
          <div class="listBac" @click="openLink(2)">
            <div class="title">
              <i class="yuan2"></i>
              <p class="title_text">点赞排行榜</p>
            </div>
            <p class="transcript">点击查看</p>
            <img
              class="imgage"
              src="https://gw.alicdn.com/tfs/TB11XXtOgHqK1RjSZJnXXbNLpXa-100-100.png"
              alt
              srcset
            >
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import TitleItem from "../../../components/public/title/title";
export default {
  name: "component_name",
  components: { TitleItem },
  data() {
    return {};
  },
  methods: {
    openLink(e) {
      if (e == 1) {
        this.$router.push("/Ranking");
      }
      if (e == 2) {
        this.$toast("敬请期待");
      }
      if (e == 3) {
        this.$toast("敬请期待");
      }
    }
  },
  created: function() {}
};
</script>
<style lang="scss" scoped>
.banner {
  background: #fff;
  img {
    width: 100%;
  }
}
.body {
  background: #fff;
  padding: 10px;
}
.list {
  background: #fff;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  .listBac {
    background: #f9f9f9;
    border-radius: 4px;
    width: 48.3%;
    height: 79px;
    position: relative;
    .imgage {
      height: 50px;
      position: absolute;
      bottom: 0%;
      right: 0;
    }
    .transcript {
      padding: 6px 18px;
      font-size: 10px;
      color: #cccdd5;
    }
    .title {
      font-size: 14px;
      color: #3a3a3a;
      padding: 20px 0 0 10px;
      display: flex;
      .yuan1 {
        display: -webkit-inline-box;
        border: 2px solid #7a5fff;
        width: 8px;
        height: 8px;
        margin-top: 6px;
        border-radius: 50%;
      }
      .yuan2 {
        display: -webkit-inline-box;
        border: 2px solid #d89531;
        width: 8px;
        height: 8px;
        margin-top: 6px;
        border-radius: 50%;
      }
      .title_text {
        padding-left: 3px;
      }
      .yuan {
        display: -webkit-inline-box;
        border: 2px solid #01a0ef;
        width: 8px;
        height: 8px;
        margin-top: 6px;
        border-radius: 50%;
      }
    }
  }
}
</style>
